<template>
    <div class="category">
        <h3>{{ title }}</h3>
        <!--插槽,等着组件的使用者进行填充-->
        <slot :foods="foods"> <br> 我是默认值</slot>
        <slot :games="games" name="footer"><br> 我是jio</slot>
        <slot :films="films" name="a"><br> 我是a</slot>
        <slot :user="user" name="b"><br> 我是b</slot>
    </div>
</template>

<script>
export default {
    name: "Category",
    props:["title"],
    data() {
        return {
            foods: ["火锅", "烧烤", "小龙虾", "牛排"],
            games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
            films: [
                "《教父》",
                "《拆弹专家》",
                "《你好，李焕英》",
                "《尚硅谷》",
            ],
            user:{fristName:"hhhhh"}
        };
    },
};
</script>

<style scoped>
.category {
    background: skyblue;
    width: 200px;
    height: 300px;
}
h3 {
    text-align: center;
    background: orange;
}
img {
    width: 100%;
}
</style>
